<script setup>
// 引入了侦听函数 watch
import {reactive, ref, watch} from 'vue'

const question = ref('')
const answer = ref('Questions usually contain a question mark. ;-)')
const loading = ref(false)


// 可以直接侦听一个 ref 对象
// async代表此函数为异步函数
// watch(question, async (newQuestion, oldQuestion) => {
//   console.log("newQuestion=", newQuestion)
//   console.log("oldQuestion=", oldQuestion)
//   if (newQuestion.includes('?')) {
//     loading.value = true
//     answer.value = 'Thinking...'
//     try {
//       // fetch 发送异步请求的函数
//       // await 等待响应 会发生阻塞
//       const res = await fetch('https://yesno.wtf/api')
//       console.log("res", res.json())
//       answer.value = (await res.json()).answer
//     } catch (error) {
//       answer.value = 'Error! Could not reach the API. ' + error
//     } finally {
//       loading.value = false
//     }
//   }
// })

// 定义ref对象
let obj = ref({
  a: {
    b: 1
  }
})

// 定义一个reactive 对象
let obj1 = reactive({
  a: {
    b: 1
  }
})

console.log("obj=", obj)
console.log("obj1=", obj)


// 如果是getter函数 就不会发生深层次监听
watch(() => obj.value, (a) => {
  console.log('a=', a)
}, {
  // 但是深层次的监听不到需要加上deep参数
  deep: true,
  // 当页面响应时立刻调用一次侦听函数
  immediate: true
})
// 如果更换了引用 getter函数就会发生侦听
// obj.value.a = null;

// 测试了 深层次侦听只要有一个变化都会被监听
watch(obj.value, (a) => {
  console.log('a=', a)
}, {
  // 但是深层次的监听不到需要加上deep参数
  // deep: true,
  // 当页面响应时立刻调用一次侦听函数
  // immediate: true
})
// obj.value.a.b++;

// 测试了 深层次侦听只要有一个变化都会被监听
watch(obj1, (a) => {
  console.log('a=', a)
}, {
  // 但是深层次的监听不到需要加上deep参数
  // deep: true,
  // 当页面响应时立刻调用一次侦听函数
  // immediate: true
})

// obj1.a.b++;

// watchEffect()
//1. 该函数当页面响应时就会执行一次
// 2. 回调函数中用到的变量自动加上了侦听


// 它会自动停止 追踪
// watchEffect(() => {})

</script>

<template>
  <p>
    Ask a yes/no question:
    <input v-model="question" :disabled="loading"/>
  </p>
  <p>{{ answer }}</p>


</template>